<template>
	<view class="login">
		<image class="logo"
			src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/basicprofile.png"></image>

		<view class="form">
			<view class="input flex">
				<input v-model="form.phone" placeholder="请输入手机号" placeholder-class="place" type="number" />
			</view>
			<view class="input flex">
				<input v-model="form.code" placeholder="请输入验证码" placeholder-class="place" type="number" />
				<text @click="send">{{ msg }}</text>
			</view>
		</view>

		<view class="btn flex" @click="login"> 登录/注册</view>

		<view class="font flex ios" @click="changeRadius">
			<u-checkbox-group v-model="checkboxValue1">
				<u-checkbox :label="label" :name="name" shape="circle"></u-checkbox>
			</u-checkbox-group>
			已阅读并同意
			<text id="user">《聚力网球俱乐部 用户协议》</text>
			<text id="ys">《聚力网球俱乐部 隐私政策》</text>
			<view class="pos"></view>
		</view>
	</view>
</template>

<script>
	import WebSocketClass from "@/common/webSocket.js";

	const app = getApp();
	import {
		gainCode,
		operationLoginOrRegister
	} from "@/api/login";

	export default {
		data() {
			return {
				label: "",
				checkboxValue1: [],
				name: 1,
				form: {
					phone: "",
					code: "",
				},
				msg: "获取验证码",
				timer: null,
			};
		},
		onLoad() {
			uni.login({
				onlyAuthorize: true,
				provider: "weixin",
				success: (res) => {
					let code = res.code;
					console.log("进来获取获取wxLogin", res.code);
					fail: (err) => {
						console.log(err);
					};
				},
			});
		},
		methods: {
			sendMsg() {
				gainCode({
					phone: this.form.phone,
				}).then((res) => {
					let n = 59;
					this.msg = n + "s";
					this.timer = setInterval(() => {
						if (n === 1) {
							clearInterval(this.timer);
							this.msg = "获取验证码";
							return;
						}
						n--;
						this.msg = n + "s";
					}, 1000);
				});
			},
			send() {
				if (this.msg !== "获取验证码") {
					return;
				}
				let toast = this.$filter.meetsTel(this.form.phone);
				if (toast !== true) {
					this.toast(toast);
					return;
				}
				this.sendMsg();

			},
			login() {
				// 正常登录
				if (!this.checkboxValue1.length) {
					this.toast("请先同意隐私政策和用户协议");
					return;
				}
				let toast = this.$filter.meetsTel(this.form.phone);
				if (toast !== true) {
					this.toast(toast);
					return;
				}
				if (!this.form.code) {
					this.toast("请先输入验证码");
					return;
				}
				uni.login({
					onlyAuthorize: true,
					provider: "weixin",
					success: (res) => {
						let code = res.code;
						operationLoginOrRegister({
							phone: this.form.phone,
							code: this.form.code,
							gainOpenCode: code,
							// // 聚力
							appId: "wx5b3843197d34d53b",
							// appSecret: "c2540b7c35dbd34b41f171456958052d"
						}).then((res) => {
							let {
								authentication
							} = res;
							uni.setStorageSync("userinfo", res);
							uni.setStorageSync("openId", res.openId);
							uni.setStorageSync("token", authentication);
							uni.setStorageSync("lineBoole", true);
							setTimeout(() => {
								this.web();
							}, 100);
							this.$event.notify("login", {
								updata: true,
							});

							uni.navigateBack({
								delta: 2,
							});
						});
					},
					fail: (err) => {
						console.log(err);
					},
				});

				// 获取微信登录凭证
				// uni.login({
				// 	onlyAuthorize: true,
				// 	provider: "weixin",
				// 	success: (res) => {
				// 		let code = res.code;
				// 		console.log("获取wxLogin", res.code);
				// 		fail: (err) => {
				// 			console.log(err);
				// 		};
				// 	},
				// });

				//浏览器登录
				// operationLoginOrRegister({
				// 	phone: this.form.phone,
				// 	code: this.form.code,
				// 	gainOpenCode: "0d3my9100ikZNR1EFw100zHHts0my91C",
				// }).then((res) => {
				// 	let {
				// 		authentication
				// 	} = res;
				// 	uni.setStorageSync("userinfo", res);
				// 	uni.setStorageSync("openId", res.openId);
				// 	uni.setStorageSync("token", authentication);
				// 	setTimeout(() => {
				// 		this.web();
				// 	}, 100);
				// 	this.$event.notify("login", {
				// 		updata: true,
				// 	});

				// 	uni.navigateBack({
				// 		delta: 2,
				// 	});
				// });
			},
			web() {
				// 如果已经有sockt实例
				if (app.globalData.socketObj) {
					// 如果sockt实例未连接
					if (!app.globalData.socketObj.isConnect) {
						app.globalData.socketObj.initSocket();
					}
				} else {
					// 如果没有sockt实例，则创建
					app.globalData.socketObj = new WebSocketClass(
						`wss://travel.daoziji.com/wss`,
						60
					);
					app.globalData.socketObj.initSocket();
				}
			},
			changeRadius(e) {
				let id = e.target.id;
				if (id) {
					uni.navigateTo({
						url: `/pages/login/web?type=${id}`,
					});
					return;
				}
				this.checkboxValue1 = this.checkboxValue1.length ? [] : [1];
			},
			toPath(url) {
				uni.navigateTo({
					url,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.login {
		height: 100vh;
		flex-direction: column;
		display: flex;
		align-items: center;
		background-color: rgba(249, 249, 249, 1);

		.logo {
			width: 200rpx;
			height: 200rpx;
			margin-top: 148rpx;
			margin-bottom: 188rpx;
		}

		.form {
			width: 690rpx;
			height: 200rpx;
			opacity: 1;
			border-radius: 10rpx;
			background: rgba(255, 255, 255, 1);

			.input {
				height: 100rpx;
				padding: 0 40rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				border-bottom: 2rpx solid rgba(238, 238, 238, 1);

				input {
					flex: 1;
				}

				.place {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0pt;
					color: rgba(189, 196, 206, 1);
				}

				text {
					width: 5em;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0pt;
					color: rgba(6, 18, 30, 1);
				}
			}

			.input:last-of-type {
				border-bottom: none;
			}
		}

		.btn {
			width: 690rpx;
			height: 90rpx;
			opacity: 1;
			margin-top: 47rpx;
			border-radius: 40rpx;
			background: rgba(4, 134, 254, 1);
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0pt;
			position: relative;
			color: rgba(249, 249, 249, 1);
		}

		.p {
			font-size: 36rpx;
			font-weight: 400;
			letter-spacing: 0pt;
			line-height: 52.13rpx;
			color: rgba(4, 134, 254, 1);
			margin-top: 20rpx;
		}
	}

	.font {
		font-size: 20rpx;
		font-weight: 400;
		letter-spacing: 0pt;
		color: rgba(172, 172, 172, 1);
		position: absolute;
		bottom: 80rpx;
		width: 100%;
		left: 0;

		.pos {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		text {
			position: relative;
			z-index: 9;
			color: rgba(4, 134, 254, 1);
		}
	}
</style>